<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车管理系统</title>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .app-container {
            display: flex;
            height: 100vh;
        }

        .app-aside {
            background: #2d3a4b;
            padding: 0;
            height: 100vh;
            color: white;
        }

        .app-menu {
            height: 100%;
        }

        .app-header {
            background: #409EFF;
            color: white;
            text-align: center;
            line-height: 60px;
            height: 60px;
        }

        .app-main {
            padding: 20px;
            overflow: auto;
            flex-grow: 1;
        }

        .book-image {
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px" class="app-aside">
        <el-menu class="app-menu" :default-openeds="['1']">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>菜单</span>
                </template>

                <el-menu-item index="1-1" @click="navigateTo('Admin_index.html')">
                    <i class="el-icon-s-data"></i>仪表盘
                </el-menu-item>
                <el-menu-item index="1-2" @click="navigateTo('Admin_user.html')">
                    <i class="el-icon-user"></i>用户管理
                </el-menu-item>
                <el-menu-item index="1-3" @click="navigateTo('settings.html')">
                    <i class="el-icon-setting"></i>设置
                </el-menu-item>
                <el-menu-item index="1-4" @click="navigateTo('Admin_wenda.html')">
                    <i class="el-icon-question"></i>问答管理
                </el-menu-item>
                <el-menu-item index="1-5" @click="navigateTo('Admin_gonggao.html')">
                    <i class="el-icon-message"></i>公告管理
                </el-menu-item>
                <el-menu-item index="1-6" @click="navigateTo('Admin_gouwuche.html')">
                    <i class="el-icon-shopping-cart-full"></i>购物车管理
                </el-menu-item>

            </el-submenu>
        </el-menu>
    </el-aside>

    <!-- 右侧操作区域 -->
    <el-container>
        <el-header class="app-header">购物车管理系统</el-header>
        <el-main class="app-main">
            <!-- 搜索框 -->
            <el-input placeholder="请输入用户" v-model="search" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </el-input>

            <!-- 购物车列表展示 -->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>购物车列表</span>
                </div>
                <el-table :data="filteredCartItems" style="width: 100%;" stripe border>
                    <el-table-column prop="id" label="ID" width="50"></el-table-column>
                    <el-table-column prop="user" label="用户"></el-table-column>
                    <el-table-column prop="book" label="书籍">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.bookImage" class="book-image" @click="handleViewBookImage(scope.row.bookImage)"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addtime" label="添加时间" width="180"></el-table-column>
                    <el-table-column prop="selectnum" label="选择数量"></el-table-column>
                    <el-table-column prop="totalprice" label="总价"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <!-- 显示书籍图片的大图对话框 -->
            <el-dialog :visible.sync="imageDialogVisible" width="30%">
                <img :src="currentImage" alt="图片" style="width: 100%;">
            </el-dialog>
        </el-main>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                search: '', // 搜索框绑定的内容
                imageDialogVisible: false, // 图片大图对话框的显示和隐藏
                currentImage: '', // 当前点击的图片链接
                cartItems: [ // 默认的购物车列表数据
                    { id: 1, user: '张三', book: 101, bookImage: '', addtime: '2023-07-15 10:00', selectnum: 2, totalprice: 200 },
                    { id: 2, user: '李四', book: 102, bookImage: '', addtime: '2023-07-16 11:00', selectnum: 1, totalprice: 100 }
                ]
            }
        },
        computed: {
            // 计算属性，根据搜索关键字过滤购物车列表
            filteredCartItems() {
                if (this.search) {
                    return this.cartItems.filter(item => item.user.includes(this.search));
                }
                return this.cartItems;
            }
        },
        created() {
            // 请求图书信息，并更新购物车列表中的书籍图片链接
            this.cartItems.forEach(item => {
                axios.get(`https://api.example.com/books/${item.book}`)
                    .then(response => {
                        item.bookImage = response.data.image; // 假设接口返回的图书信息中有 image 属性
                    })
                    .catch(error => {
                        console.error('请求图书信息失败：', error);
                    });
            });
        },
        methods: {
            navigateTo(page) {
                window.location.href = page; // 使用参数指定跳转页面路径
            },
            // 搜索按钮点击处理
            handleSearch() {
                // 这里只是更新搜索关键字，filteredCartItems 会自动更新
            },
            // 书籍图片点击处理，显示大图对话框
            handleViewBookImage(image) {
                this.currentImage = image;
                this.imageDialogVisible = true;
            },
            // 删除按钮点击处理，删除指定购物车项目
            handleDelete(row) {
                this.$confirm('此操作将永久删除该购物车项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const index = this.cartItems.findIndex(item => item.id === row.id);
                    if (index !== -1) {
                        this.cartItems.splice(index, 1);
                    }
                    this.$message.success('删除成功!');
                }).catch(() => {});
            }
        }
    });
</script>
</body>
</html>
